<template>
  <div class="mobile-pagination-container">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
    name: 'MobilePagination',
    props: {
        currentPage: {
            type: Number,
            required: true
        },
        pageSize: {
            type: Number,
            required: true
        },
        total: {
            type: Number,
            required: true
        },
        pageSizes: {
            type: Array,
            default: () => [10, 20, 30, 50]
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper'
        }
    },
    methods: {
        handleSizeChange (val) {
            this.$emit('size-change', val);
        },
        handleCurrentChange (val) {
            this.$emit('current-change', val);
        }
    }
};
</script>

<style lang="scss" scoped>
.mobile-pagination-container {
  text-align: center;
  margin-top: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
  .mobile-pagination-container {
    .el-pagination {
      white-space: normal;

      .el-pagination__sizes {
        margin-top: 10px;
      }
    }
  }
}
</style>
